<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<link type="text/css" href="css/tab.css" rel="stylesheet" />		
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
		</script>
	
	</head>
	<body>
			<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">
				<table width="600" height="213" border="0" cellpadding="0" cellspacing="0">
					<tr>
					  <td class="stt" width="28" rowspan="3" align="center">STT</td>
					  <td class="chucnang" width="280" rowspan="3" align="center">Chức năng</td>
					  <td class="goia" height="27" colspan="2" align="center">Gói A</td>
					  <td class="goib" colspan="2" align="center">Gói B</td>
				  </tr>
					<tr>
					  <td class="price" height="32" colspan="2" align="center"><strong>11.2  triệu ~ 18.5 triệu VNĐ</strong></td>
					  <td class="price" colspan="2" align="center"><strong>11.2  triệu ~ 18.5 triệu VNĐ</strong></td>
				  </tr>
					<tr>
					  <td class="option" height="30" colspan="2" align="center">Option + Đơn giá (VNĐ)</td>
					  <td class="option" colspan="2" align="center">Option + Đơn giá (VNĐ)</td>
					</tr>
                    <tr>
					  <td height="37">1</td>
					  <td class="text"><strong>CMS - Quản lý tin tức  / bài viết (post / article)</strong></td>
					  <td colspan="2" align="center"><strong>2.35  triệu ~ 3.5 triệu</strong></td>
					  <td colspan="2" align="center"><strong>2.35  triệu ~ 3.5 triệu</strong></td>
				    </tr>
                    <tr>
					  <td height="26">1.1</td>
					  <td>Hiển thị</td>
					  <td colspan="2" align="center">x</td>
					  <td colspan="2" align="center">x</td>
				    </tr>
                    <tr>
					  <td height="35">1.2</td>
					  <td >Bài viết (bản tin, bài giới  thiệu, bài quảng cáo, khuyến mãi, hướng dẫn sử dụng, giới thiệu dịch vụ, …)</td>
					  <td colspan="2" align="center">x</td>
					  <td colspan="2" align="center">x</td>
				    </tr>
                    <tr>
					  <td height="24">1.3</td>
					  <td>Audio, video</td>
					  <td width="66" align="center">tùy  chọn</td>
					  <td width="72" align="center">+-500.000</td>
					  <td width="66" align="center">tùy  chọn</td>
					  <td width="74" align="center">+-500.000</td>
				  	</tr>
				</table>
				<p>&nbsp;</p>
</div><!--end tabs 1-->
			<div id="tabs-2">
				Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
			</div>
			<div id="tabs-3">
				Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
			</div>
		</div><!--end tabs-->
	</body>
</html>


